<template>
	<view class="userbox">
		<!-- 头部个人信息 不变-->
		<view class="userHeader" :style="{background:colors}">
			<image src="/static/images/user/user-bg.png" class="user_bg"></image>
			<view class="nav"  v-if="phone !=''">
				<view class="user" @click="onLogin">
					<image :src="userdata.avatarUrl" v-if="userdata.avatarUrl"></image>
					<image src="../../../static/images/face.jpg" v-else></image>
					<text>{{userdata.nickName || '登录'}}</text>
				</view >
			</view>
			<view class="nav" v-else>
				<view class="user" @click="onLogin">
					<image :src="userdata.avatarUrl"  v-if="phone !=''"></image>
					<image src="../../../static/images/face.jpg" v-else></image>
					<text>登录</text>
				</view >
			</view>
			<view class="vip" v-if="tonkens!=''">
				<image src="/static/images/user/vip-card.png" class="vip_bg"></image>
				<view class="vipname">
					<text class="iconfont icon-zuanshi zuanshi"></text>
					<text class="names" v-if="phone !=''">
						商城尊享会员
					</text>
					<text class="names" v-else>
						未登录
					</text>
					<text class="vip_level" v-if="phone !=''">{{user.vip_name}}</text>
					<text v-else></text>
				</view>
				<view class="banquan">
					商城版权所有©
				</view>
			</view>
		</view>
		<!-- 中间菜单栏 -->
		<!-- #ifndef H5 -->
		<view class="userMenu" @touchstart="coverTouchStart" @touchmove="coverTouchMove" @touchend="coverTouchEnd"
			:style="'transform:' + coverTransform + ';transition:' + coverTransition">
			<image src="/static/images/user/arc.png" class="arc"></image>
			<!-- 我的账户 -->
			<my-account :colors="colors" :accountdata='accountdata'></my-account>
			<!-- 全部订单 -->
			<my-order :orderText="orderText" :colors="colors"  :nums="nums"></my-order>
			<!-- 我的足迹 -->
			<my-footprint :logList="logList" :colors="colors"></my-footprint>
			<!-- 我的服务 -->
			<my-server :serverList="serverList" :colors="colors" :userinfo="userdata"></my-server>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="userMenu" @touchmove.stop.prevent="moveHandle" @touchstart="coverTouchStart"
			@touchmove="coverTouchMove" @touchend="coverTouchEnd"
			:style="'transform:' + coverTransform + ';transition:' + coverTransition">
			<image src="/static/images/user/arc.png" class="arc"></image>
			<!-- 我的账户 -->
			<my-account :colors="colors" :accountdata='accountdata'></my-account>
		</view>
		<view class="place">
			<!-- 全部订单 -->
			<my-order :orderText="orderText" :colors="colors" :nums="nums"></my-order>
			<!-- 我的足迹 -->
			<my-footprint :logList="logList" :colors="colors"></my-footprint>
			<!-- 我的服务 -->
			<my-server :serverList="serverList" :colors="colors"></my-server>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	let app = getApp();
	import {
		getConfig,
		getUserInfo,
		getToken
	} from '@/utils/auth';
	import myAccount from "../../commponent/user/my-account";
	import listCell from "../../commponent/user/list-cell";
	import myOrder from "../../commponent/user/my-order";
	import myFootprint from "../../commponent/user/my-footprint";
	import myServer from "../../commponent/user/my-server";

	export default {
		data() {
			return {
				accountdata: {},
				colors: '',
				startY: 0,
				//原始坐标
				moving: false,
				user: '',
				//当前元素的状态（是否移动）
				coverTransform: 'translateY(0px)',
				//元素的移动
				coverTransition: '0s',
				tonkens: '',
				phone:'',
				nums:false,
				//动画效果
				orderText: [{
						name: '待付款',
						icon: 'icon-daifukuan',
						url: '',
						id: 0,
						status: 2,
						number:0,
					}, {
						name: '待发货',
						icon: 'icon-daifahuo',
						url: '',
						id: 1,
						status: 4,
						number:0,
					}, {
						name: '待收货',
						icon: 'icon-daishouhuo1',
						url: '',
						id: 2,
						status: 5,
						number:0,
					},
					{
						name: '待评价',
						icon: 'icon-daipingjia',
						url: '',
						id: 3,
						status: 9,
						number:0,
					}, {
						name: '退款/售后',
						icon: 'icon-shouhou',
						url: '/pages/views/order/afterSaleList',
						id: 4,
						status: 9,
						number:0,
					}
				],
				logList: [],
				serverList: [{
					name: '我的收藏',
					icon: 'icon-shoucang',
					url: '/pages/views/user/mycollection',
					id: 1,
					elseUrl: ''
				}, {
					name: '地址管理',
					icon: 'icon-dizhi',
					url: '/pages/views/user/myaddress',
					id: 2,
					elseUrl: ''
				}, {
					name: '分销中心',
					icon: 'icon-fenxiao',
					url: '/pages/views/user/mydistribution',
					id: 6,
					elseUrl: ''
				}, {
					name: '分享',
					icon: 'icon-fenxiang1',
					url: '/pages/views/user/extension',
					id: 7,
					elseUrl: ''
				}, {
					name: '联系我们',
					icon: 'icon-kefu1',
					tel:'15562999515',
					url: '',
					id: 8,
					elseUrl: ''
				}, {
					name: '设置',
					icon: 'icon-shezhi2',
					url: '../setting/index',
					id: 9,
					elseUrl: ''
				}],
				oldcolor: '',
				userdata: {},
				phone:'',
			};
		},

		components: {
			myAccount,
			listCell,
			myOrder,
			myFootprint,
			myServer
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			console.log('honghuxinxi1',getUserInfo())
			console.log('token',getToken())
			let colors = app.globalData.newColor;
			let oldcolor = this.colors;
			let userdata = getUserInfo() || {};
			let uid = uni.getStorageSync("uid");
			 this.phone = uni.getStorageSync("phone");
			 console.log('sfasfasf',this.phone)
			this.tonkens = getToken();
			this.nums=false;
			this.setData({
				colors: colors,
				userdata: userdata
			});
			console.log(userdata)
			if (oldcolor !== colors) {
				//如果旧颜色不等于新颜色
				let config = getConfig();
				let tabList = config.tabList;
				uni.setTabBarStyle({
					selectedColor: colors
				});
				if (tabList) {
					for (var i = 0; i < tabList.length; i++) {
						let img = tabList[i];
						uni.setTabBarItem({
							//设置tabBar 首页图标
							index: i,
							selectedIconPath: img
						});
					}
				}
			}
			//判断是否登录
			let expire = uni.getStorageSync("expire");
			let phone = uni.getStorageSync("phone");
			if (!phone && (expire * 1000) - Date.parse(new Date()) <= 0) {
				let that = this
				this.accountdata = {}
				this.logList = {}
				that.nums=false
				uni.hideTabBarRedDot({
					index : 2,
				});
			} else {
				let that = this
				this.myrequest('data/api.auth.order/total', {
					token: getToken()
				}).then((res) => {
					if (res.code == 1) {
						let levelist = res.data;
						that.orderText.forEach((item, index) => {
							let key = 't' + item.status;
							if (levelist[key] != false) {
								that.orderText[index].number = levelist[key];
							}
						})
						that.nums=true
					}
				})
				this.myrequest('data/api.auth.center/get').then((res) => {
					if (res.code == 1) {
						this.accountdata = res.data;
					}
				})
				this.$store.dispatch({
					type: 'cartleng',
					uid: uid
				});
				this.myrequest('data/api.auth.browse/allhistory', {
					userid: uid
				}, 'POST').then(res => {
					this.logList = res
				})
				this.myrequest("data/api.auth.center/get")
					.then(res => {
						console.log('denglu',res.data)
						this.user = res.data

					})

			}


		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			onLogin() {
				// let token = getToken()
				// if (getToken()) {
				// 	return
				// }
				// uni.navigateTo({
				// 	url: '../../login/warrant'
				// })
				let phone=this.phone
				if (phone) {
					return
				}
				uni.navigateTo({
					url: '../../login/warrant'
				})
			},
			coverTouchStart(e) {
				//滑动开始 记录目标原始坐标
				this.setData({
					startY: e.touches[0].clientY,
					coverTransition: 'transform .2s linear'
				});
			},
			moveHandle() { //阻止下拉默认事件

			},
			coverTouchMove(e) {
				//滑动中
				let moveY = e.touches[0].clientY; //记录移动的坐标
				let startY = this.startY;
				let moveDistance = moveY - startY; //计算当前坐标与原始坐标的差
				if (moveDistance < 0) {
					//如果小于0 不做操作
					this.setData({
						moving: false
					});
					return;
				}
				this.setData({
					moving: true
				});

				if (moveDistance >= 60) {
					//如果差在该区间内
					moveDistance = 60;
				}

				if (moveDistance > 0 && moveDistance <= 60) {
					this.setData({
						coverTransform: `translateY(${moveDistance}px)`
					});
				}
			},

			coverTouchEnd(e) {
				//滑动结束 回到原始位置
				if (this.moving == false) {
					return;
				}
				this.setData({
					coverTransform: 'translateY(0px)',
					moving: false,
					coverTransition: 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)'
				});
			},
		}
	};
</script>
<style scoped lang="scss">
	.userHeader {
		height: 520upx;
		width: 100vw;
		position: relative;
		padding: 50upx 4%;
	}

	.userHeader .user_bg {
		height: 100%;
		width: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.userHeader .nav {
		height: 180upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user {
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		overflow: hidden;
		z-index: 200;
	}

	.user image {
		width: 130upx;
		height: 130upx;
		border: 5upx solid #fff;
		border-radius: 50%;
	}

	.user text {
		font-size: 38upx;
		color: #fff;
		margin-left: 20upx;
	}

	.vip {
		height: 240upx;
		position: relative;
		display: flex;
		padding: 20upx 24upx;
		border-radius: 16upx 16upx 0 0;
		width: 100%;
		overflow: hidden;
	}

	.banquan {
		position: absolute;
		color: #f6e5a3;
		top: 100upx;
		left: 24upx;
		font-size: 24upx;
	}

	.vip .vip_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.vipname {
		z-index: 5;
		display: flex;
		width: 100%;
		height: 60upx;
		position: relative;
		align-items: center;
	}

	.vipname .zuanshi {
		color: #f6e5a3;
		font-size: 42upx;
		line-height: 60upx;
	}

	.vipname .names {
		color: #f6e5a3;
		line-height: 20upx;
		font-size: 24upx;
		margin-left: 20upx;
	}

	.vip_level {
		width: 115upx;
		height: 35upx;
		text-align: center;
		line-height: 35upx;
		font-size: 20upx;
		color: #333;
		background: linear-gradient(270deg, #f9e6af, #ffd465);
		border-radius: 20upx;
		position: absolute;
		top: 12upx;
		right: 10upx;
	}

	/* 中间菜单栏 */
	.userMenu {
		margin-top: -178upx;
		padding: 0 4%;
		position: relative;
		background-color: #f8f8f8;
		padding-bottom: 10upx;
	}

	.userMenu .arc {
		width: 100%;
		height: 36upx;
		position: absolute;
		top: -34upx;
		left: 0;
	}

	.place {
		padding: 0 4%;
		position: relative;
		background-color: #f8f8f8;
		padding-bottom: 40upx;
	}
</style>
